<template>
  <view class="test-container">
    <view class="test-title">uni-app API 测试页面</view>
    
    <view class="test-section">
      <view class="section-title">导航API测试</view>
      <button type="primary" @click="testNavigateTo">测试 navigateTo</button>
      <button type="primary" @click="testRedirectTo">测试 redirectTo</button>
      <button type="primary" @click="testNavigateBack">测试 navigateBack</button>
      <button type="primary" @click="testSwitchTab">测试 switchTab</button>
    </view>
    
    <view class="test-section">
      <view class="section-title">界面API测试</view>
      <button type="primary" @click="testShowToast">测试 showToast</button>
      <button type="primary" @click="testShowLoading">测试 showLoading</button>
    </view>
    
    <view class="test-section">
      <view class="section-title">数据缓存API测试</view>
      <button type="primary" @click="testSetStorage">测试 setStorage</button>
      <button type="primary" @click="testGetStorage">测试 getStorage</button>
      <button type="primary" @click="testRemoveStorage">测试 removeStorage</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 导航API测试
function testNavigateTo() {
  uni.navigateTo({
    url: '/pages/home/index',
    success: function() {
      console.log('navigateTo success')
    },
    fail: function(err) {
      console.error('navigateTo fail', err)
    }
  })
}

function testRedirectTo() {
  uni.redirectTo({
    url: '/pages/home/index',
    success: function() {
      console.log('redirectTo success')
    },
    fail: function(err) {
      console.error('redirectTo fail', err)
    }
  })
}

function testNavigateBack() {
  uni.navigateBack({
    delta: 1,
    success: function() {
      console.log('navigateBack success')
    },
    fail: function(err) {
      console.error('navigateBack fail', err)
    }
  })
}

function testSwitchTab() {
  uni.switchTab({
    url: '/pages/home/index',
    success: function() {
      console.log('switchTab success')
    },
    fail: function(err) {
      console.error('switchTab fail', err)
    }
  })
}

// 界面API测试
function testShowToast() {
  uni.showToast({
    title: '测试成功',
    icon: 'success',
    duration: 2000
  })
}

function testShowLoading() {
  uni.showLoading({
    title: '加载中...'
  })
  
  setTimeout(function() {
    uni.hideLoading()
  }, 2000)
}

// 数据缓存API测试
function testSetStorage() {
  uni.setStorage({
    key: 'test',
    data: 'Hello uni-app!',
    success: function() {
      uni.showToast({
        title: '存储成功'
      })
    }
  })
}

function testGetStorage() {
  uni.getStorage({
    key: 'test',
    success: function(res) {
      uni.showToast({
        title: '获取成功: ' + res.data,
        icon: 'none'
      })
    },
    fail: function() {
      uni.showToast({
        title: '获取失败，可能没有存储数据',
        icon: 'none'
      })
    }
  })
}

function testRemoveStorage() {
  uni.removeStorage({
    key: 'test',
    success: function() {
      uni.showToast({
        title: '删除成功'
      })
    }
  })
}
</script>

<style>
.test-container {
  padding: 20px;
}

.test-title {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30px;
}

.test-section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 18px;
  margin-bottom: 15px;
}

button {
  margin-bottom: 10px;
}
</style>